<template>
  <div class="container">
    <!-- 顶部操作栏 -->
    <div class="cart-header">
      <div class="cart-actions">
        <div class="select-all">
          <label class="checkbox-wrapper">
            <input
              type="checkbox"
              id="select-all"
              :checked="selectAll"
              @change="
                handleSelectAllChange(
                  ($event.target as HTMLInputElement).checked,
                )
              "
            />
            <span class="checkmark"></span>
            <span class="checkbox-label">全选</span>
          </label>
        </div>
        <div class="action-buttons">
          <ul>
            <li @click="handleDeleteSelected">删除</li>
            <li @click="handleMoveToFavorites">移入收藏</li>
            <li @click="handleClearCart">清理购物车</li>
          </ul>
        </div>
      </div>
      <div class="delivery-info">配送至：深圳</div>
    </div>

    <!-- 店铺区域 -->
    <div class="store-section">
      <div class="store-header">
        <div class="store-info">
          <label class="checkbox-wrapper">
            <input
              type="checkbox"
              :checked="store.selected"
              @change="
                handleStoreSelectChange(
                  ($event.target as HTMLInputElement).checked,
                )
              "
            />
            <span class="checkmark"></span>
            <span class="store-type">{{ store.type }}</span>
          </label>
        </div>
        <div class="shipping-info">
          {{ store.shippingInfo }}
        </div>
      </div>

      <!-- 商品项 -->
      <div
        v-for="product in store.products"
        :key="product.id"
        class="product-item"
      >
        <div class="product-select">
          <label class="checkbox-wrapper">
            <input
              type="checkbox"
              :checked="product.selected"
              @change="
                handleProductSelectChange(
                  product.id,
                  ($event.target as HTMLInputElement).checked,
                )
              "
            />
            <span class="checkmark"></span>
          </label>
        </div>
        <div class="product-image">
          <span>商品图片</span>
        </div>
        <div class="product-main">
          <div class="product-details">
            <div class="product-name">{{ product.name }}</div>

            <!-- 当前选择的规格显示 -->
            <div class="current-spec" @click="openSpecDialog(product)">
              <span class="spec-label">已选：</span>
              <span class="spec-value">
                {{ getSelectedSpecLabel(product) }}
              </span>
              <span class="spec-arrow">›</span>
            </div>

            <div class="product-service">{{ product.service }}</div>
          </div>
          <div class="product-price">
            <ul>
              <li class="current-price">￥{{ product.currentPrice }}</li>
              <li v-if="product.originalPrice" class="original-price">
                ￥{{ product.originalPrice }}
              </li>
              <li v-if="product.priceProtection" class="price-protection">
                7天价保
              </li>
            </ul>
          </div>
          <div class="quantity-control">
            <div class="quantity-control-inner">
              <button @click="decreaseQuantity(product.id)">-</button>
              <input
                type="text"
                :value="product.quantity"
                @input="handleQuantityInput(product.id, $event)"
              />
              <button @click="increaseQuantity(product.id)">+</button>
            </div>
          </div>
          <div class="product-actions">
            <div class="product-buttons">
              <button @click="handleProductMoveToFavorites(product.id)">
                移入收藏
              </button>
              <button @click="handleProductDelete(product.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="recommendation">
      <div class="recommendation-header">猜你喜欢</div>
      <div class="recommendation-list">
        <div
          v-for="item in recommendationItems"
          :key="item.id"
          class="recommendation-item"
        >
          <div class="rec-image">
            <span>商品图片</span>
          </div>
          <div class="rec-name">{{ item.name }}</div>
          <div class="rec-price">
            ¥{{ item.price }}
            <span v-if="item.originalPrice" class="rec-original-price">
              ¥{{ item.originalPrice }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部结算栏 -->
    <div class="cart-footer">
      <div class="footer-left">
        <div class="footer-select">
          <label class="checkbox-wrapper">
            <input
              type="checkbox"
              id="footer-select-all"
              :checked="selectAll"
              @change="
                handleSelectAllChange(
                  ($event.target as HTMLInputElement).checked,
                )
              "
            />
            <span class="checkmark"></span>
            <span class="checkbox-label">全选</span>
          </label>
        </div>
        <div class="selected-count">已选{{ selectedCount }}件商品</div>
      </div>
      <div class="footer-right">
        <div class="price-summary">
          <div class="total-price">合计：￥{{ totalPrice.toFixed(2) }}</div>
          <div class="discount-info">
            商品总额:￥{{ originalTotal.toFixed(2) }} 优惠:￥{{
              discount.toFixed(2)
            }}
            优惠明细
          </div>
        </div>
        <button class="checkout-btn" @click="handleCheckout">去结算</button>
      </div>
    </div>

    <!-- 规格选择弹出框 -->
    <transition name="spec-dialog">
      <div
        v-if="specDialogVisible"
        class="spec-dialog-overlay"
        @click="closeSpecDialog"
      >
        <div class="spec-dialog" @click.stop>
          <div class="spec-dialog-header">
            <div class="product-info">
              <div class="product-image-small">
                <span>图片</span>
              </div>
              <div class="product-info-text">
                <div class="product-price-spec">
                  ￥{{ currentProduct?.currentPrice }}
                </div>
                <div class="product-stock">库存充足</div>
                <div class="selected-spec">
                  已选：{{ getDialogSelectedSpecLabel() }}
                </div>
              </div>
            </div>
            <button class="close-btn" @click="closeSpecDialog">×</button>
          </div>

          <div class="spec-dialog-content">
            <!-- 版本选择 -->
            <div class="spec-section" v-if="versionOptions.length > 0">
              <div class="spec-title">选择版本</div>
              <div class="spec-options">
                <button
                  v-for="option in versionOptions"
                  :key="option.value"
                  class="spec-option"
                  :class="{
                    active: tempSelectedVersion === option.value,
                    disabled: option.disabled,
                  }"
                  @click="selectTempVersion(option.value)"
                  :disabled="option.disabled"
                >
                  {{ option.label }}
                </button>
              </div>
            </div>

            <!-- 外观选择 -->
            <div class="spec-section" v-if="appearanceOptions.length > 0">
              <div class="spec-title">选择外观</div>
              <div class="spec-options">
                <button
                  v-for="option in appearanceOptions"
                  :key="option.value"
                  class="spec-option"
                  :class="{
                    active: tempSelectedAppearance === option.value,
                    disabled: option.disabled,
                  }"
                  @click="selectTempAppearance(option.value)"
                  :disabled="option.disabled"
                >
                  {{ option.label }}
                </button>
              </div>
            </div>

            <!-- 套装选择 -->
            <div class="spec-section" v-if="packageOptions.length > 0">
              <div class="spec-title">选择套装</div>
              <div class="spec-options">
                <button
                  v-for="option in packageOptions"
                  :key="option.value"
                  class="spec-option"
                  :class="{
                    active: tempSelectedPackage === option.value,
                    disabled: option.disabled,
                  }"
                  @click="selectTempPackage(option.value)"
                  :disabled="option.disabled"
                >
                  {{ option.label }}
                </button>
              </div>
            </div>
          </div>

          <div class="spec-dialog-footer">
            <button class="confirm-btn" @click="confirmSpecSelection">
              确认
            </button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// 类型定义
interface SpecOption {
  value: string
  label: string
  price?: number
  disabled?: boolean
}

interface Product {
  id: string
  name: string
  spec: string
  service: string
  currentPrice: number
  originalPrice?: number
  priceProtection: boolean
  image: string
  quantity: number
  selected: boolean
  selectedVersion?: string
  selectedAppearance?: string
  selectedPackage?: string
}

interface Store {
  id: string
  name: string
  type: string
  shippingInfo: string
  selected: boolean
  products: Product[]
  promotion?: string
}

interface RecommendationItem {
  id: string
  name: string
  price: number
  originalPrice?: number
  image: string
}

// 响应式数据
const store = ref<Store>({
  id: 'store1',
  name: '对比亚欧东日签旗舰店',
  type: '对比亚欧东日签旗舰店',
  shippingInfo: '已免运费 试用PLUS可享6元免邮权益',
  selected: false,
  promotion: '[预售商品优惠] 满2件总价折 去本单',
  products: [
    {
      id: 'product1',
      name: 'vivo IQOO Z10 Turbo + 12GB+256GB 云海白 天玑9400+旗舰芯 8000mAh超薄蓝海电池',
      spec: '云海白 12GB+256GB',
      service: '服务：可选择增值服务',
      currentPrice: 2519,
      originalPrice: 2799,
      priceProtection: true,
      image: '',
      quantity: 1,
      selected: false,
      selectedVersion: '12GB+256GB',
      selectedAppearance: '云海白',
      selectedPackage: '官方标配',
    },
    {
      id: 'product2',
      name: '京东超市 卫龙数字美妆条休闲零食香辣素毛肚160g/袋约12小包蛋蟹野餐小零食',
      spec: '香辣素1约11-12小包1100g 换促销～',
      service: '服务：可选择增值服务',
      currentPrice: 11.9,
      priceProtection: true,
      image: '',
      quantity: 1,
      selected: false,
    },
  ],
})

const recommendationItems = ref<RecommendationItem[]>([
  {
    id: 'rec1',
    name: '我是原初 畅销榜单 人会首购量188页豆',
    price: 46.9,
    originalPrice: 69.9,
    image: '',
  },
  {
    id: 'rec2',
    name: 'Cinon 全自动精用伞 三折大号防紫外线防晒衣',
    price: 59.9,
    image: '',
  },
  {
    id: 'rec3',
    name: '蓝月亮 深层透净洗衣液 黑夜霜雪 1kg*1瓶*50-51.8',
    price: 19.27,
    originalPrice: 21.9,
    image: '',
  },
  {
    id: 'rec4',
    name: '奥利奥（Oreo）海航 金石凤米炒手串护身 夹心饼干 多口味组合95g~ 特男女款茶盒炒转运纸箱...',
    price: 16.9,
    originalPrice: 17.9,
    image: '',
  },
])

// 规格选择相关数据
const specDialogVisible = ref(false)
const currentProduct = ref<Product | null>(null)

// 临时选择的规格（只在弹出框内有效）
const tempSelectedVersion = ref('')
const tempSelectedAppearance = ref('')
const tempSelectedPackage = ref('')

// 规格选项数据
const versionOptions = ref<SpecOption[]>([
  { value: '12GB+256GB', label: '12GB+256GB' },
  { value: '12GB+512GB', label: '12GB+512GB' },
  { value: '16GB+256GB', label: '16GB+256GB', disabled: false },
])

const appearanceOptions = ref<SpecOption[]>([
  { value: '云海白', label: '云海白' },
  { value: '极地灰', label: '极地灰' },
  { value: '沙漠色', label: '沙漠色' },
])

const packageOptions = ref<SpecOption[]>([
  { value: '官方标配', label: '官方标配' },
  { value: '限量赠一年碎屏保', label: '限量赠一年碎屏保' },
  { value: '教育优惠版', label: '教育优惠版' },
  { value: 'IQOO TWS Air3Pro套装', label: 'IQOO TWS Air3Pro套装' },
])

// 计算属性
const selectAll = computed(() => {
  return (
    store.value.products.length > 0 &&
    store.value.products.every((product) => product.selected)
  )
})

const selectedCount = computed(() => {
  return store.value.products.filter((product) => product.selected).length
})

const totalPrice = computed(() => {
  return store.value.products
    .filter((product) => product.selected)
    .reduce(
      (total, product) => total + product.currentPrice * product.quantity,
      0,
    )
})

const originalTotal = computed(() => {
  return store.value.products
    .filter((product) => product.selected)
    .reduce(
      (total, product) =>
        total +
        (product.originalPrice || product.currentPrice) * product.quantity,
      0,
    )
})

const discount = computed(() => {
  return originalTotal.value - totalPrice.value
})

// 方法
const handleSelectAllChange = (selected: boolean) => {
  store.value.selected = selected
  store.value.products.forEach((product) => {
    product.selected = selected
  })
}

const handleProductSelectChange = (productId: string, selected: boolean) => {
  const product = store.value.products.find((p) => p.id === productId)
  if (product) {
    product.selected = selected
    // 更新店铺选择状态
    const allSelected = store.value.products.every((p) => p.selected)
    store.value.products.some((p) => p.selected)
    store.value.selected = allSelected
  }
}

const handleStoreSelectChange = (selected: boolean) => {
  store.value.selected = selected
  store.value.products.forEach((product) => {
    product.selected = selected
  })
}

const decreaseQuantity = (productId: string) => {
  const product = store.value.products.find((p) => p.id === productId)
  if (product && product.quantity > 1) {
    product.quantity--
  }
}

const increaseQuantity = (productId: string) => {
  const product = store.value.products.find((p) => p.id === productId)
  if (product) {
    product.quantity++
  }
}

const handleQuantityInput = (productId: string, event: Event) => {
  const value = parseInt((event.target as HTMLInputElement).value)
  const product = store.value.products.find((p) => p.id === productId)
  if (product && !isNaN(value) && value > 0) {
    product.quantity = value
  }
}

// 规格选择相关方法
const openSpecDialog = (product: Product) => {
  currentProduct.value = product
  // 初始化临时选择为当前商品的实际选择
  tempSelectedVersion.value = product.selectedVersion || ''
  tempSelectedAppearance.value = product.selectedAppearance || ''
  tempSelectedPackage.value = product.selectedPackage || ''
  specDialogVisible.value = true
}

const closeSpecDialog = () => {
  specDialogVisible.value = false
  currentProduct.value = null
  // 清空临时选择
  tempSelectedVersion.value = ''
  tempSelectedAppearance.value = ''
  tempSelectedPackage.value = ''
}

const getSelectedSpecLabel = (product: Product) => {
  if (!product) return ''
  const version =
    versionOptions.value.find((opt) => opt.value === product.selectedVersion)
      ?.label || ''
  const appearance =
    appearanceOptions.value.find(
      (opt) => opt.value === product.selectedAppearance,
    )?.label || ''
  const packageOpt =
    packageOptions.value.find((opt) => opt.value === product.selectedPackage)
      ?.label || ''

  return (
    [version, appearance, packageOpt].filter(Boolean).join(' ') || '请选择规格'
  )
}

const getDialogSelectedSpecLabel = () => {
  const version =
    versionOptions.value.find((opt) => opt.value === tempSelectedVersion.value)
      ?.label || ''
  const appearance =
    appearanceOptions.value.find(
      (opt) => opt.value === tempSelectedAppearance.value,
    )?.label || ''
  const packageOpt =
    packageOptions.value.find((opt) => opt.value === tempSelectedPackage.value)
      ?.label || ''

  return (
    [version, appearance, packageOpt].filter(Boolean).join(' ') || '请选择规格'
  )
}

// 临时选择方法（只在弹出框内有效）
const selectTempVersion = (version: string) => {
  tempSelectedVersion.value = version
}

const selectTempAppearance = (appearance: string) => {
  tempSelectedAppearance.value = appearance
}

const selectTempPackage = (packageOpt: string) => {
  tempSelectedPackage.value = packageOpt
}

// 确认规格选择
const confirmSpecSelection = () => {
  if (currentProduct.value) {
    // 只有在确认时才更新商品的规格信息
    currentProduct.value.selectedVersion = tempSelectedVersion.value
    currentProduct.value.selectedAppearance = tempSelectedAppearance.value
    currentProduct.value.selectedPackage = tempSelectedPackage.value

    // 更新商品规格显示
    currentProduct.value.spec = getSelectedSpecLabel(currentProduct.value)

    console.log('规格选择确认:', {
      product: currentProduct.value.name,
      version: currentProduct.value.selectedVersion,
      appearance: currentProduct.value.selectedAppearance,
      package: currentProduct.value.selectedPackage,
    })
  }
  closeSpecDialog()
}

const handleProductDelete = (productId: string) => {
  store.value.products = store.value.products.filter((p) => p.id !== productId)
}

const handleProductMoveToFavorites = (productId: string) => {
  console.log('Move to favorites:', productId)
}

const handleDeleteSelected = () => {
  store.value.products = store.value.products.filter((p) => !p.selected)
}

const handleMoveToFavorites = () => {
  const selectedProducts = store.value.products.filter((p) => p.selected)
  console.log('Move to favorites:', selectedProducts)
}

const handleClearCart = () => {
  store.value.products = []
}

const handleCheckout = () => {
  console.log(
    'Checkout with:',
    store.value.products.filter((p) => p.selected),
  )
}

onMounted(() => {
  console.log('Cart mounted')
})
</script>

<style lang="scss" scoped>
.container {
  max-width: 74.375rem;
  margin: 0 auto;
  padding-bottom: 5rem;
}

/* 自定义圆形checkbox样式 */
.checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;

  input[type='checkbox'] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;

    &:checked + .checkmark {
      background-color: #e4393c;
      border-color: #e4393c;

      &::after {
        display: block;
      }
    }
  }

  .checkmark {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    transition: all 0.2s ease;
    margin-top: 0.125rem;

    &:hover {
      border-color: #e4393c;
    }

    &::after {
      content: '';
      position: absolute;
      display: none;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -60%) rotate(45deg);
      width: 0.375rem;
      height: 0.625rem;
      border: solid white;
      border-width: 0 2px 2px 0;
    }
  }

  .checkbox-label {
    margin-left: 0.5rem;
    font-size: 0.75rem;
  }
}

/* 顶部操作栏 */
.cart-header {
  background-color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  margin: 0.75rem 0;
  border-radius: 0.25rem;

  .cart-actions {
    display: flex;
    align-items: center;

    .select-all {
      display: flex;
      align-items: center;
      margin-right: 1.5rem;
    }

    .action-buttons {
      ul {
        display: flex;

        li {
          background: none;
          border: none;
          padding: 0.25rem 0.75rem;
          cursor: pointer;
          font-size: 0.75rem;

          &:hover {
            color: #e4393c;
          }
        }
      }
    }
  }

  .delivery-info {
    font-size: 0.75rem;
    color: #666;
  }
}

/* 店铺区域 */
.store-section {
  background-color: #fff;
  margin-bottom: 0.75rem;
  border-radius: 0.25rem;
  overflow: hidden;

  .store-header {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;

    .store-info {
      display: flex;
      align-items: center;

      .store-type {
        font-weight: bold;
        color: #e4393c;
        font-size: 0.75rem;
        border: 1px solid #e4393c;
        padding: 0.125rem 0.25rem;
        border-radius: 0.125rem;
        margin-left: 0.5rem;
      }
    }

    .shipping-info {
      font-size: 0.75rem;
      color: #666;
    }
  }

  .promotion {
    padding: 0.75rem 1rem;
    background-color: #fff5f5;
    font-size: 0.75rem;
    color: #e4393c;
    border-bottom: 1px solid #eee;
  }
}

/* 商品项 */
.product-item {
  padding: 1rem;
  display: flex;
  border-bottom: 1px solid #f5f5f5;

  &:last-child {
    border-bottom: none;
  }

  .product-select {
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
  }

  .product-image {
    width: 6.25rem;
    height: 6.25rem;
    margin-right: 0.75rem;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 0.25rem;
  }

  .product-main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .product-details {
      flex: 1;
      max-width: 60%;

      .product-name {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        line-height: 1.4;
      }

      /* 当前规格显示 */
      .current-spec {
        display: flex;
        align-items: center;
        font-size: 0.75rem;
        color: #666;
        margin-bottom: 0.5rem;
        cursor: pointer;
        padding: 0.25rem 0.5rem;
        background: #f5f5f5;
        border-radius: 0.25rem;
        max-width: fit-content;

        &:hover {
          background: #eee;
        }

        .spec-label {
          margin-right: 0.25rem;
        }

        .spec-value {
          color: #333;
          font-weight: 500;
        }

        .spec-arrow {
          margin-left: 0.5rem;
          font-size: 1rem;
          color: #999;
        }
      }

      .product-service {
        font-size: 0.75rem;
        color: #666;
        margin-bottom: 0.5rem;
      }
    }

    .product-price {
      ul {
        .current-price {
          color: #e4393c;
          font-weight: bold;
          font-size: 1rem;
        }

        .original-price {
          color: #999;
          font-size: 0.75rem;
          text-decoration: line-through;
          margin-top: 0.5rem;
        }

        .price-protection {
          font-size: 0.75rem;
          color: #666;
          margin-top: 0.5rem;
          padding: 0.125rem 0.25rem;
          border: 1px solid #eee;
          border-radius: 0.125rem;
        }
      }
    }

    .quantity-control {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 1rem;

      .quantity-control-inner {
        display: flex;
        align-items: center;

        button {
          width: 1.5rem;
          height: 1.5rem;
          border: 1px solid #ddd;
          background: #fff;
          cursor: pointer;
          font-size: 0.875rem;

          &:hover {
            background: #f5f5f5;
          }
        }

        input {
          width: 2.5rem;
          height: 1.5rem;
          border: 1px solid #ddd;
          text-align: center;
          margin: 0 0.25rem;
          font-size: 0.75rem;
        }
      }
    }

    .product-actions {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      min-width: 6rem;

      .product-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        button {
          background: none;
          border: none;
          padding: 0.25rem 0.5rem;
          cursor: pointer;
          font-size: 0.75rem;
          color: #666;
          text-align: right;

          &:hover {
            color: #e4393c;
          }
        }
      }
    }
  }
}

/* 猜你喜欢 */
.recommendation {
  background-color: #fff;
  border-radius: 0.25rem;
  overflow: hidden;
  margin-bottom: 1rem;

  .recommendation-header {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .recommendation-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;

    @media (max-width: 64rem) {
      grid-template-columns: repeat(2, 1fr);
    }

    .recommendation-item {
      text-align: center;
      border: 1px solid #eee;
      border-radius: 0.25rem;
      padding: 0.5rem;
      transition: transform 0.2s;
      background: #fff;

      &:hover {
        transform: translateY(-0.25rem);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .rec-image {
        width: 100%;
        height: 9.375rem;
        background-color: #f9f9f9;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #eee;
        border-radius: 0.25rem;
      }

      .rec-name {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
        height: 2.25rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
      }

      .rec-price {
        color: #e4393c;
        font-weight: bold;
        font-size: 0.875rem;

        .rec-original-price {
          color: #999;
          font-size: 0.75rem;
          text-decoration: line-through;
          margin-left: 0.25rem;
        }
      }
    }
  }
}

/* 底部结算栏 */
.cart-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 100;

  .footer-left {
    display: flex;
    align-items: center;

    .footer-select {
      display: flex;
      align-items: center;
      margin-right: 1rem;
    }

    .selected-count {
      font-size: 0.75rem;
      color: #666;
    }
  }

  .footer-right {
    display: flex;
    align-items: center;

    .price-summary {
      text-align: right;
      margin-right: 1rem;

      .total-price {
        font-size: 1.125rem;
        color: #e4393c;
        font-weight: bold;
        margin-bottom: 0.25rem;
      }

      .discount-info {
        font-size: 0.75rem;
        color: #666;
      }
    }

    .checkout-btn {
      background-color: #e4393c;
      color: #fff;
      border: none;
      padding: 0.75rem 2rem;
      border-radius: 0.25rem;
      font-size: 1rem;
      cursor: pointer;
      font-weight: bold;

      &:hover {
        background-color: #c62f2f;
      }

      &:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
    }
  }
}

/* 规格选择弹出框 */
.spec-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.spec-dialog {
  background: #fff;
  border-radius: 0.5rem;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spec-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
  border-bottom: 1px solid #eee;

  .product-info {
    display: flex;
    gap: 1rem;

    .product-image-small {
      width: 4rem;
      height: 4rem;
      background: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #eee;
      border-radius: 0.25rem;
      flex-shrink: 0;
    }

    .product-info-text {
      .product-price-spec {
        color: #e4393c;
        font-size: 1.125rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
      }

      .product-stock {
        color: #666;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
      }

      .selected-spec {
        color: #333;
        font-size: 0.75rem;
      }
    }
  }

  .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #999;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      color: #666;
    }
  }
}

.spec-dialog-content {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;

  .spec-section {
    margin-bottom: 1.5rem;

    .spec-title {
      font-size: 0.875rem;
      font-weight: bold;
      margin-bottom: 0.75rem;
      color: #333;
    }

    .spec-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;

      .spec-option {
        padding: 0.5rem 1rem;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        cursor: pointer;
        transition: all 0.2s;
        min-width: 80px;

        &:hover:not(.disabled) {
          border-color: #e4393c;
          color: #e4393c;
        }

        &.active {
          border-color: #e4393c;
          background-color: #fff5f5;
          color: #e4393c;
        }

        &.disabled {
          background-color: #f9f9f9;
          color: #ccc;
          cursor: not-allowed;
          border-color: #eee;
        }
      }
    }
  }
}

.spec-dialog-footer {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid #eee;
  background: #f9f9f9;

  .confirm-btn {
    background-color: #e4393c;
    color: #fff;
    border: none;
    padding: 0.75rem 3rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    width: 100%;

    &:hover {
      background-color: #c62f2f;
    }
  }
}

/* 弹出框过渡动画 */
.spec-dialog-enter-active,
.spec-dialog-leave-active {
  transition: opacity 0.3s ease;
}

.spec-dialog-enter-from,
.spec-dialog-leave-to {
  opacity: 0;
}

.spec-dialog-enter-active .spec-dialog,
.spec-dialog-leave-active .spec-dialog {
  transition: transform 0.3s ease;
}

.spec-dialog-enter-from .spec-dialog,
.spec-dialog-leave-to .spec-dialog {
  transform: scale(0.9);
}
</style>
